<template>
  <div>
    <div class="left">
      <div class="leftContent">
        <div class="round"></div>
        <div class="topic">
          <span>ORDER聚造</span>
          <div class="right3">
            <i class="el-icon-s-unfold"></i>
          </div>
        </div>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="transparent"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>首页管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/index/banner">轮播图管理</el-menu-item>
              <el-menu-item index="/index/category">分类区管理</el-menu-item>
              <el-menu-item index="/index/recommend">为你推荐管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/index/sort">分类管理</el-menu-item>
              <el-menu-item index="/index/brand">品牌管理</el-menu-item>
              <el-menu-item index="/index/product">商品管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>新闻管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/index/news">新闻管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <div class="right">
      <div class="block">
        <b>{{ $route.meta.title }}</b>
        <div class="right1">
          <el-avatar :size="50" :src="photo"></el-avatar>
          <div class="right2">
            <span style="color: #eab924; margin: 0px 8px"><b>{{ group.groupName }}</b></span>
            <el-tooltip placement="bottom">
              <div slot="content" @click="dialogFormVisible = true" class="cursor">修改密码</div>
              <span class="cursor">{{ nickName }}</span>
            </el-tooltip>
            <span>，你好！</span>
            <el-button type="danger" size="small" round icon="el-icon-switch-button" @click="logout">退出</el-button>
          </div>
        </div>
      </div>

      <router-view></router-view>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="passWord">
          <el-input type="password" v-model="form.passWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input type="password" v-model="form.newPassWord"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassWord">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  name: "index",
  components: {},
  data() {
    return {
      photo: "",
      nickName: "",
      dialogFormVisible: false,
      form: {
        passWord: "",
        newPassWord: "",
        userName: "",
      },
      group: {
        //选中的群组
        groupId: "",
        groupName: "",
      },
      menus: [], //菜单树
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        passWord: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassWord: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.form.newPassWord) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    changePassWord() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/admin/changePassWord",
            method: "POST",
            data: {
              passWord: md5(this.form.passWord),
              newPassWord: md5(this.form.newPassWord)
            },
          }).then((res) => {
            if (!res.errorMsg) {
              this.$message({
                message: "修改密码成功",
                type: "success",
                duration: 3000
              });
              setTimeout(() => {
                location.href = "#/login";
              },3000)
            }
          })
        } else {
          return false;
        }
      });
    },
    logout() {
      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: "admin/logout",
        }).then((res) => {
          if (res.errorMsg) {
            this.$message.error(res.errorMsg);
          } else {
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            location.href = "#/login";
          }
        });
      });
    },
    getMenus() {
      this.$http({
        url: "/v1/leftMenuTree",
        params: {
          groupId: this.group.groupId,
        },
      }).then((res) => {
        //菜单数据
        if (!res.errorMsg) this.menus = res;
      });
    },
  },
  created() {
    //从缓存获取登录用户信息
    let user = localStorage.getItem("user");
    if (!user) {
      //返回登录
      // this.$router.push('/login')
      location.href = '#/login';
    } else {
      //解析为对象
      user = JSON.parse(user);
      //设置头像
      this.photo = user.avatarUrl || require("../image/bg.png");
      //设置昵称
      this.nickName = user.nickName || "小王";
      //获取菜单
      // this.getMenus()
    }
  },
  mounted() {},
};
</script>

<style>
.compont {
  line-height: 32px;
  cursor: pointer;
}

.left {
  background: url();
  background-size: cover;
  color: #fff;
  width: 295px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  position: fixed;
  font-size: 16px;
  color: #aaaaaa;
}
.leftContent {
  width: 295px;
}

.right {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  margin-left: 295px;
  background-color: #eff6fc;
}
.right1 {
  float: right;
  margin-right: 50px;
  margin-top: -10px;
}
.right2 {
  float: right;
  margin-top: 10px;
}
.right3 {
  display: flex;
  justify-content: center;
  align-content: center;
}
.round {
  width: 44px;
  height: 29px;
  border-radius: 0 0 22px 22px;
  opacity: 0.5;
  margin-left: 20px;
}
.topic {
  width: 100%;
  height: 30rpx;
  margin-top: -20px;
  margin-left: 30px;
  opacity: 1;
  font-size: 20px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-content: center;
}
.topic i {
  /* padding: 20px; */
  margin-left: 60px;
  justify-content: center;
  align-content: center;
}
.login {
  margin-top: 40px;
  margin-left: 25px;
}
.login1 {
  margin-left: 10px;
}
.data {
  width: 95%;
  margin: 40px auto;
  background-color: #ffffff;
  height: 70px;
  line-height: 70px;
}
.block {
  padding-top: 40px;
  padding-left: 30px;
}
.demonstration {
  margin-left: 30px;
  margin-right: 30px;
}

.button {
  margin-top: -70px;
  margin-left: 380px;
}
.message {
  width: 95%;
  margin: 50px auto;
  padding-top: 10px;

  border: 1px solid #ccc;
  background-color: #fff;
}
.message1 {
  margin: 0 10px 30px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 18px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 18px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 18px;
}
.menuItem {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.menuText {
  flex: 1;
}
.menuActive {
  width: 5px;
  height: 26px;
  background: #ed0606;
}
.el-submenu .el-menu-item {
  padding-right: 8px;
}
.cursor {
  cursor: pointer;
}
@media screen and (max-width: 1440px) {
  .left {
    width: 235px;
  }
  .leftContent {
    transform-origin: 0 0;
    transform: scale(0.8);
  }
  .right {
    margin-left: 240px;
  }
  .block {
    padding-top: 32px;
    padding-left: 24px;
    font-size: 14px;
  }
  .right1 {
    margin-right: 40px;
  }
}
</style>